/* Import the brand-color.css file */
@import "colorguide.css";   

/* Import the brand-color.css file */
@import "help.css";   
.login-from-detail{
    align-items: center;
}

body{ font-family: "Montserrat", serif;}

.login_detail {
    width:500px;
    margin:0px auto
}

.w-full {
    width: 100%;
}
.object-cover {-o-object-fit: cover;object-fit: cover;}
.h-full {height: var(--vh);}
.left-side { width: 100%}

.right-side {
    width: 800px;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    z-index: 9999;
    padding: 40px;
    border-radius: 40px;
}
    .password-feild {
        position: relative;
    }
    .passwordicon {
        position: absolute;
        top: 13px;
        right: 11px;
    }
    

.loginlogo .logo-sm {
    width: 70px;
}


.loginlogo, .logintext{text-align: center;}
.loginlogo img{margin-bottom: 10px;}
.loginlogo h2{font-size: 18px;
}

.logintext{
    font-size: var(--font-size-20);
    color: var(--black-medium);
}
.loginlogo h2, .logintext h3{
    font-weight: var(--font-weight-700);
}


.loginlogo{
    margin-bottom: var(--gap-30);
}

.logintext, .login-from{
    margin-bottom: var(--gap-20);
}


.logintext h3{margin-bottom: var(--gap-5); font-size: var(--font-size-16)}
.logintext p {
    font-size: var(--font-size-16);
    font-weight: normal;
    
}

.login-from{width: 100%;}

.login-from label{
    font-size: 14px;
    font-weight: normal;
}
.loginbtn{text-align: center;}
.actionbtn {
    width:100%
}
.loginbtn .btn-lg {
    padding: var(--gap-15) var(--gap-80) !important;
}


/*  */

::placeholder {
    color: #BDBDBD !important;
    opacity: 1; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: #BDBDBD !important;
  }

.overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
}


.left-side{
    position: relative;
}

.form-control.error{
    border: 1px solid var(--accent-red) !important;
}

.custom-field.one input + .placeholder{
    padding: 12px 5px
}


@media screen and (max-width: 8000px) and (min-width: 6001px) {
    .login_detail, .login-from, .loginbtn {
        width: 80%
    }

    .logintext p {
        width: 100%
    }

    .logo-sm {
        width: 240px;
    }

    .loginlogo h2 {
        font-size: 80px;
        margin: 30px 0px 100px
    }

    .logintext h3 {
        margin-bottom: var(--gap-15);
        font-size: 50px;
    }

    .logintext p {
        width: 100%;
        font-size: 50px;
    }

    .login-from, .loginbtn {
        margin: 0px auto;
    }

        .login-from label {
            font-size: 45px;
            font-weight: normal;
            margin-bottom: 30px;
        }

        .login-from .form-control {
            border: 1px solid var(--form-control-border);
            border-radius: var(--radius-8) !important;
            padding: 30px;
            height: 180px;
            color: var(--neutral-black) !important;
            line-height: 18px;
            font-weight: 400;
            line-height: 25px;
            text-align: left;
            font-size: 50px !important;
        }

    .loginbtn {
        padding-top: 40px
    }

        .loginbtn .btn-lg {
            padding: 100px !important;
            width: 100%;
            font-size: 50px;
        }
}
@media screen and (max-width: 8000px) and (min-width: 3001px) {

.login_detail {
    width: 800px;
    margin: 0px auto;
}
    .loginlogo .logo-sm {
        width: 170px;
    }
   

    .loginlogo h2 {
        font-size: 50px;
        margin-top: 30px;
    }
    .logintext h3 {
        font-size: var(--font-size-35);
    }

    .logintext p, .login-from label, .login-from .form-control, .login-from .input-group-text, .login-from small  {
        font-size: var(--font-size-25);
    }

    .form-control {
        padding: var(--gap-30);
        margin-top: 20px;
    }

    .loginbtn .btn-lg {
        padding: var(--gap-45) var(--gap-80) !important;
    }
    .actionbtn{
        font-size: var(--font-size-25);
    }
    .login_detail  .select2-container--default .select2-selection--single, .multiselect.dropdown-toggle {
        
        height: 85px !important;
        padding: 30px 21px !important;
    }
    .login_detail  .select2-container--default .select2-selection--single .select2-selection__rendered{
        font-size: 25px !important;
    }
}

@media screen and (max-width: 3000px) and (min-width: 2501px) {

    .loginlogo .logo-sm {
        width: 120px;
    }
    

    .loginlogo h2 {
        font-size: 30px;
    }
    .logintext h3 {
        font-size: var(--font-size-25);
    }

    .logintext p, .login-from label, .login-from .form-control, .login-from .input-group-text, .login-from small  {
        font-size: var(--font-size-16);
    }

    .form-control {
        padding: var(--gap-20);
    }

    .loginbtn .btn-lg {
        padding: var(--gap-35) var(--gap-80) !important;
    }
    .actionbtn{
        font-size: var(--font-size-20);
    }


    .login_detail  .select2-container--default .select2-selection--single, .multiselect.dropdown-toggle {
        
        height: 65px !important;
        
        padding: 20px 21px !important;
    }
    
}

    @media screen and (max-width: 2500px) and (min-width: 1921px) {
        
        .logintext h3 {
            font-size: var(--font-size-25);
        }

        .logintext p, .login-from label, .login-from .form-control, .login-from .input-group-text, .login-from small  {
            font-size: var(--font-size-16);
        }

        .form-control{
            padding: var(--gap-15);
        }   

        .loginbtn .btn-lg {
            padding: var(--gap-30) var(--gap-80) !important;
        }

        .actionbtn{
            font-size: var(--font-size-18);
        }

        
    }
    @media(max-width: 1100px) {
        .login_detail, .opt_details {
            width: 400px;}
    }

    @media(max-width: 850px) {
        .login_detail, .opt_details {
            width: 350px;}
    }
    @media(max-width: 799px) {
        .left-side {
            width: 100%;
        }

        .login-from-detail{
            display: block !important;
         
        }

        .right-side {
            width: 95%;
            bottom: 0px;
            z-index: 9999;
            position: absolute;
            padding: 0px 50px;
            background: #fff;
            border-radius: 40px 40px 0px 0px;
            margin: 0px auto;
            right: 0px;
            left: 0px;
            height: 570px;
        }

        .loginlogo .logo-sm {
            width: 60px;
        }

        .loginlogo h2 {
            font-size: 18px;
        }

        .opt_details{
            width: 100%;
        }
        .login_detail {width: 100%;}
    }

    .error {
        border: 1px solid red;
      }
      .valid {
        border: 1px solid green;
      }